Foundations of Computer Graphics - Lecture 1 [Part 3]

مقدمة
  • هنكمل الشابتر الاول, الجزء ده من المحاضرة بيتكلم عن أنظمة الإحداثيات (Coordinate Systems) في الـ Computer Graphics.
  • هنعرف الفرق بين Cartesian System و Screen System و Pixel Coordinates، وإزاي بنحول بينهم، وهنتعرف على Aspect Ratio

1) Coordinate Systems

definition

Coordinate System is a method of assigning numerical values to geometric points so they can be uniquely identified in space.

  • أي graphics system محتاج طريقة يحدد بيها مكان objects, الطريقة دي هي الـ Coordinate System.
  • من غير coordinates مش هنعرف نحدد نقطة أو خط أو شكل موجود فين.

2) Cartesian Coordinate System

  • الـ Cartesian Coordinate System هو النظام الرياضي الي كلنا عارفينه.
  • النقطة في 2D بتتكتب:
P(x, y)
  • ا x: المكان الأفقي horizontal position.
  • ا y: المكان الرأسي vertical position.
  • في الرياضيات العادية:
    • الـ origin (0, 0) بيبقى تحت على الشمال.
    • قيم y بتزيد لفوق.
  • النظام بيستخدم محورين متعامدين:
    • ا x-axis: horizontal
    • ا y-axis: vertical
  • ده يعتبر الأساس النظري والرياضي اللي أنظمة الإحداثيات في graphics بتتبني عليه.
  • مش بيعتمد على screen أو pixels أو hardware.

3) 3D Coordinate System

  • في الـ 3D Graphics، النقطة بتتكتب:
(x, y, z)
  • الـ z-axis بيضيف العمق depth.
  • عشان كده نقدر نمثل objects في مساحة ثلاثية الأبعاد.

4) Screen Coordinate System

  • شاشات الكمبيوتر بتستخدم conventions مختلف عن الرياضيات.
  • الـ origin (0, 0) بيبقى فوق على الشمال top-left corner (في الـ Cartesian system كان تحت علي الشمال).
  • الـ x-axis بيزيد ناحية اليمين.
  • الـ y-axis بيزيد لتحت (في الـ Cartesian system كان بيزيد لفوق).

بصمجيات

في الرياضيات y بيطلع لفوق، لكن في الشاشات y بينزل لتحت.

5) Pixel Coordinates

  • دي احنا عارفينها من قبل كده ,الصور بتتمثل كشبكة Raster, كل cell في الـ raster هي Pixel, وكل pixel ليه لون واحد وبالـ cells بتبقي عباره عن صفوف واعمده.

Pixel Coordinate Pair

(x, y)
  • الـ columns بتتعد من الشمال لليمين بداية من 0.
  • الـ rows غالبا بتتعد من فوق لتحت بداية من 0.

6) Real-Number Coordinate Systems

  • مش لازم coordinates تكون integers أو pixels.
  • أحيانا بنستخدم وحدات قياس حقيقية , مثلا :
    • لو مستطيل بيمثل أوضة مساحتها 15 foot × 12 foot، يبقى منطقي نستخدم:
      • ا x من 0 لـ 15
      • ا y من 0 لـ 12

7) Transforming Between Coordinate Systems

  • أحيانا graphics system بيسمحلك تحدد custom coordinate system.
  • الفكرة إنك بتحول نقطة من old coordinate system لـ new coordinate system مع الحفاظ على نفس relative position.

General Idea

  • عندك old limits:
    • ا oldLeft, oldRight
    • ا oldTop, oldBottom
  • و هيديلك new limits:
    • ا newLeft, newRight
    • ا newTop, newBottom
  • النقطة القديمة (oldX, oldY) بتتحول لنقطة جديدة (newX, newY).

Formula Concept

  • لو عندنا نقطة في "النظام القديم" وعايزين نعرف مكانها في "النظام الجديد" ، بنستخدم المعادلة دي:

الفكرة الأساسية (The Core Concept)

  • أي Coordinate Transformation بيتكون من خطوتين أساسيتين:

  1. ا Normalize (تحويل لنسبة): بنحول قيمة old لنسبة بين 0 و 1:

  2. ا Scale to new system: بنضرب النسبة في مدى النظام الجديد ونجمعها على البداية الجديدة:

ليه الموضوع ده مهم؟

الآلية دي بتتستخدم في كل حاجة في الـ Computer Graphics:

  • OpenGL viewport transformation
  • DirectX rendering pipeline
  • Mouse input handling
  • Game engines (Unity, Unreal Engine)
  • Window resizing
  • UI layout systems

مثال 1: Mapping Logical Coordinates (0 to 100) → 800×600 Screen

عايزين ننقل نقطة من نظام إحداثيات منطقي (من 0 لـ 100) لشاشة 800×600 بكسل.

المعطيات:

  • Old system: oldLeft = 0, oldRight = 100, oldTop = 0, oldBottom = 100
  • New system: newLeft = 0, newRight = 800, newTop = 0, newBottom = 600
  • النقطة: (oldX, oldY) = (25, 50)

حساب newX:

حساب newY:

النتيجة: (25, 50) → (200, 300)

مثال 2: Mapping from (-1 to +1) → 800×600 Screen (OpenGL)

النظام ده أشهر حاجة في OpenGL. الإحداثيات فيها بتتراوح من -1 لـ +1.

المعطيات:

  • oldLeft = -1, oldRight = +1, oldTop = -1, oldBottom = +1
  • النقطة: (0, 0) — مركز النظام المنطقي

حساب newX:

حساب newY:

النتيجة: (0, 0) → (400, 300)

المركز المنطقي بقى مركز الشاشة بالظبط.

مثال 3: Reverse Transformation (Screen → Logical Coordinates)

الماوس بيشتغل بإحداثيات الشاشة (pixels)، بس إحنا محتاجين نحولها لنظامنا المنطقي. نفس القانون بس بعكس الاتجاه.

المعطيات:

  • Screen size: 800 × 600
  • Logical system: من 0 لـ 100
  • Mouse position: (600, 150)

حساب oldX:

حساب oldY:

النتيجة: (600, 150) → (75, 25)

بكده نقدر نحول أي mouse click لإحداثيات منطقية في تطبيقنا.

مثال 4: Mapping from (0 to 10) → 1920×1080 Screen

لو شاشة Full HD (1920×1080) ونظام منطقي من 0 لـ 10.

المعطيات:

  • Old system: من 0 لـ 10
  • New system: 1920 × 1080
  • النقطة: (7, 2)

حساب newX:

حساب newY:

النتيجة: (7, 2) → (1344, 216)

8) Aspect Ratio

definition

Aspect Ratio is the ratio between width and height.

  • القانون العام (لو عايز تحسب النسبه بتاعة الشاشه):

  • قانون نظام الإحداثيات (لو عايز تحسب النسبة علي الـ Coordinate system):

  • مثلا لو الـ aspect ratio عباره عن 2:1 يعني العرض ضعف الارتفاع.

Coordinate Systems and Aspect Ratio

  • نظام الإحداثيات اللي بترسم عليه ليه Aspect Ratio، والشاشة اللي بتعرض عليها ليها Aspect Ratio. لو النسبتين دول مش قد بعض، الرسمة "هتتمط" أو هتبوظ.

Example

  • المعادلة دي بتمثل دايره:
x^2 + y^2 = 9
  • لو aspect ratios مش متطابقة، الـدايره ممكن تظهر شكل بيضاوي.
  • عشان نحافظ على دقة الأشكال، بنعدل:
    • الـ horizontal range
    • أو vertical range
  • الهدف إن الزياده تبقى متساويه في الاتجاهين يعني لو هنزود الـ horizontal يبقي كمان نزود الـ vertical.

9) Aliasing and Antialiasing

The Aliasing Problem

definition

Aliasing is the visual artifact that appears when continuous geometric shapes are approximated using a finite grid of square pixels.

  • طبعا شرحناها قبل كده ولو ناسي هنشرحها تاني.
  • الشاشة بتاعتنا عبارة عن شبكة مربعات صغيرة جداً اسمها "بيكسلات". المشكلة بتظهر لما تيجي ترسم خط مايل أو كيرف (دوران) على المربعات دي.
  • بما إن البيكسلات مربعة ومرصوصة جنب بعض، مستحيل ترسم خط مايل ناعم عليها، فبيظهر تأثير اسمه Staircase Effect (تأثير السلالم أو الـ Jaggies)، وهو إن حواف الرسمة بتبان مشرشرة وشبه درجات السلم.

Causes of Aliasing

السبب التعريف معناه
Sampling Error Continuous shapes are sampled at discrete pixel locations. بتحاول ترسم أشكال ناعمة ومتصلة على شبكة مربعات متقطعة،فبيحصل تعارض.
Limited Resolution Pixels cannot represent partial coverage without approximation. البيكسل بياخد لون واحد بس، يعني مفيش حاجة اسمها نصه أسود ونصه أبيض، فبيضطر يختار لون واحد، وده بيبوظ شكل الحواف.
Coordinate Mapping Ambiguity Real-valued coordinates must be mapped to integer pixel positions. الكمبيوتر مش بيبقي عارف هل الإحداثيات دي بتشاور على نص البيكسل؟ ولا الحته اللي فوق على الشمال؟ ولا الزاوية؟ اللخبطة دي بتأثر على إزاي الرسمة بتتحول لبيكسلات في النهاية.
بصمجيات

الـ Aliasing بيحصل بسبب اننا :

  • بنحاول نرسم أشكال ناعمة على بيكسلات مربعة ومتقطعة (Sampling Error)، لان البكسل بياخد غير واحد بس (Limited Resolution)، بيحصل لخبطة للكمبيوتر في تحديد مكان النقطة بالظبط (Ambiguity).

10) Antialiasing

definition

Antialiasing is a technique used to reduce aliasing artifacts by smoothing object boundaries.

  • الـ Antialiasing مش بيلغي aliasing, هو بيخليها أقل وضوحا للعين.
  • بدل ما كل pixel ياخد لون واحد ، بنحسب قد إيه الشكل مغطي الـ pixel,يعني لو بنرسم خط اسود مايل مثلا , البكسلز الي علي الطرف نديلها لون وسط مش اسود ولا ابيض فيحصل كان الحواف بتسيح في بعضها او بتبقي انعم.

anti-aliasing

Key Principle

حالة الـ pixel التعريف اللون
Fully covered full object color ياخد لون الـ object الي بنرسمه كامل (في حالتنا لون الخط الي هو الاسود)
Partially covered blended color ياخد لون وسط، زي gray لو الخط black والخلفية white
Uncovered background color ياخد لون الـ background (ابيض في حالتنا)
  • الـ Antialiasing بيزود cost, بس بيحسن جودة الصوره بشكل كبير.

11) ملخص المحاضرة

كده خلصنا الجزء التالت

اتكلمنا في المحاضره دي عن أنظمة الإحداثيات (Coordinate Systems) وعرفنا الفرق بين Cartesian System (الـ origin تحت على الشمال و y بتزيد لفوق) و Screen System (الـ origin فوق على الشمال و y بتزيد لتحت) و Pixel Coordinates (الـ columns من الشمال لليمين والـ rows من فوق لتحت).

وعرفنا إزاي بنحول بين Coordinate Systems باستخدام معادلات الـ mapping، وإن Aspect Ratio = Width / Height، ولو الـ Aspect Ratio بتاع نظام الإحداثيات مش مطابق للشاشة، الشكل هيتشوه.

واتكلمنا عن Aliasing - إنه تأثير السلاسل (Jaggies) اللي بيظهر لما بنحاول نرسم خطوط مائلة على شبكة Pixels، و Antialiasing اللي بيحل المشكلة دي باستخدام ألوان متوسطة على الحواف عشان تنعيم الشكل.